<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    /***
     * 1. 单分支： if(){} <==>    xxx && yyy
     * 2. 双分支： if(){}else{}   三元表达式
     * 3. 多分支： 封装成函数 if(){}else if(){}else{}
     * 
     */
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    let vdom;
    let money = 500;

    // 1.  单分支条件渲染
    // if(money>=500){
    //     vdom = <div>女朋友是：迪丽热巴</div>
    // }
    // 逻辑与
    // vdom = money >= 500 && <div>女朋友是：迪丽热巴</div>

    // 2. 双分支：
    // if(money >=500){
    //     vdom = <div>女朋友是：迪丽热巴</div>
    // }else{
    //     vdom = <div>女朋友是：古力娜扎</div>
    // }
    // 三元表达式
    // vdom = money>=500 ? <div>迪丽热巴</div> : <div>古力娜扎</div>

    // 3. 多分支
    function girlFriend(money) {
        if (money >= 500) {
            return <div>迪丽热巴</div>
        } else if (money >= 400 && money < 500) {
            return <div>古力娜扎</div>
        } else {
            return <div>贾玲</div>
        }
    }

    root.render((
        <>
            {girlFriend(100)}
        </>
    ))

</script>

</html>